<template>
	<view class="container">
		<view v-if="list.length > 0">
			<view class="box" v-for="(item, index) in list" :key="index">
				<view class="uni-inline-item">
					<image mode="widthFix" :src="item.headImgUrl || '../../../static/images/default.png'" class="pic">
					</image>
					<view class="uni-flex-item">
						<view class="name">{{item.storeName}}</view>
						<view class="p">{{userPhone}}</view>
					</view>
				</view>
				<button @click="getIsSalesMan(item,false)" v-if="item.isSalesman" class="btn"
					style="background-color: red;">取消业务员</button>
				<button @click="getIsSalesMan(item,true)" v-else class="btn">指定为业务员</button>

			</view>
		</view>
		<view v-else>
			<u-empty mode="favor" icon="../../../../static/images/comment.png" text="暂无记录" width="320" height="320"
				textSize="24"></u-empty>
		</view>
	</view>
</template>


<script>
	import {
		getIsSalesMan
	} from '@/api/user.js';
	export default {
		data() {
			return {
				list: [],
			}

		},

		onLoad() {
			let that = this;
			that.getStoreSale();
		},

		onShow() {

		},

		methods: {
			getIsSalesMan(item,isSales) {
				let that = this;
				getIsSalesMan({
					userId: item.userInfoId,
					isSales: isSales
				}).then(res => {
					if (res.value === 1 && res.resultCode === 1){
						that.$util.Tips({
							title: '修改成功'
						});
						this.getStoreSale();
					}
				})
			},
			getStoreSale() {
				let that = this;
				that.$request.get('user/getStoreList', {
					userInfoId: that.$store.state.app.uid
				}).then(res => {
					that.list = res.value.list
				}).catch(err => {
					that.$util.Tips({
						title: err
					})
				})
			}
		}
	}
</script>

<style>
	page {
		background: #F8F8F8;
	}

	.container {
		padding: 20rpx;
	}

	.container .box {
		background: #FFFFFF;
		padding: 20rpx;
		border-radius: 14rpx;
		margin-bottom: 20rpx;
	}

	.container .pic {
		width: 90rpx;
		margin-right: 20rpx;
		height: 90rpx;
	}

	.container .name {
		font-weight: bold;
	}

	.container .p {
		color: #666;
	}

	.container .uni-flex {
		margin-top: 20rpx;
		text-align: center;
		font-size: 32rpx;
	}

	.container .dt {
		font-size: 24rpx;
		color: #9C9C9C;
	}

	.container .uni-flex .uni-flex-item {
		position: relative;
	}

	.container .uni-flex .uni-flex-item+.uni-flex-item::after {
		content: '';
		display: block;
		border-left: 1px solid #eee;
		height: 50rpx;
		position: absolute;
		left: 0;
		top: 50%;
		transform: translate(0, -50%);
	}

	.btn {
		margin-top: 20rpx;
		display: flex;
		/* 确保按钮是 flex 布局 */
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		width: 100%;
		/* 设置按钮宽度 */
		height: 80rpx;
		/* 设置按钮高度 */
		background-color: #06A972;
		/* 按钮背景颜色 */
		color: white;
		/* 按钮字体颜色 */
		border-radius: 10rpx;
		/* 按钮圆角 */
		font-size: 32rpx;
		/* 按钮字体大小 */
	}
</style>